<!-- 专题详情页 -->
<template>
  <div class="topicDetail-main">
    <Navbar :title="title" />
    <div class="topicContent">
      <div class="topicImg" v-html="topicDetail" />
    </div>
    <!-- 专题推荐 -->
    <div class="topicRecommend">
      <div class="topicRecommendTitle">专题推荐</div>
      <div class="topicRecommendList">
        <div class="topicRecommendItem" v-for="item in recommendList" :key="item.id">
          <img  class="itemImg" :src="item.scene_pic_url" alt="">
          <div class="itemTitle">{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/Navbar";
import topicApi from "@/api/topic/index";
export default {
  name: "topicDetail",
  components: {
    Navbar,
  },
  data() {
    return {
      id: "",
      title: "分类详情页",
      topicDetail: "",
      recommendList:[]
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.getTopicDetail();
  },
  methods: {
    getTopicDetail() {
      topicApi
        .topicDetail({
          id: this.id,
        })
        .then((res) => {
          this.topicDetail = res.data.content;
          this.recommendList=res.recommendList
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.topicDetail-main {
  .topicContent {
    width: 375px;
    .topicImg {
      width: 375px;
    }
    ::v-deep img {
      width: 100%;
    }
  }
  .topicRecommend {
    margin-top: 15px;
    .topicRecommendTitle {
      text-align: center;
      color: #999;
      font-size: 15px;
      padding-bottom: 15px;
    }
    .topicRecommendList{
      margin-bottom: 20px;
      .topicRecommendItem{
        margin-left: 15px;
        margin-bottom: 10px;
        width: 345px;
        height: 214px;
        background-color: $bagColor;
       .itemImg{
         padding-top: 8px;
         width: 321px;
         height: 139px;
         margin-left: 12px;
       }
       .itemTitle{
        padding-top: 10px;
        margin-left: 12px;
        font-size: 15px;
        color: #000;
       }
      }
    }
  }
}
</style>